<template>
    <div class="maincontent">
        <div class="contentbox">
            <div class="printImg">
                <img src="../../../../assets/third/print.png" alt="">
            </div>
            <div class="addadvice">
                <div class="header">
                    <div class="title">审查意见录入</div>
                    <div class="export">
                        <img src="../../../../assets/third/downloadlogo.png" />导出审查意见
                    </div>
                </div>
                <div v-if="!showadd">
                    <div class="menulist">
                        <div class="item active">市中心意见</div>
                        <div class="item">区县意见</div>
                        <div class="add" @click="addadvice">新增</div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="advicelist">
                        <div class="item">
                            <div class="situation">
                                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                                <div class="msg">问题描述：部分内容缺失</div>
                                <div class="msg">修改情况：
                                    <el-radio v-model="radio" label="1">已修改</el-radio>
                                    <el-radio v-model="radio" label="2">未修改</el-radio>
                                </div>
                            </div>
                            <div class="other">
                                <div class="date">2018/10/03</div>
                                <div class="delete">删除</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="situation">
                                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                                <div class="msg">问题描述：部分内容缺失</div>
                                <div class="msg">修改情况：
                                    <el-radio v-model="radio" label="1">已修改</el-radio>
                                    <el-radio v-model="radio" label="2">未修改</el-radio>
                                </div>
                            </div>
                            <div class="other">
                                <div class="date">2018/10/03</div>
                                <div class="delete">删除</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="situation">
                                <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
                                <div class="msg">问题描述：部分内容缺失</div>
                                <div class="msg">修改情况：
                                    <el-radio v-model="radio" label="1">已修改</el-radio>
                                    <el-radio v-model="radio" label="2">未修改</el-radio>
                                </div>
                            </div>
                            <div class="other">
                                <div class="date">2018/10/03</div>
                                <div class="delete">删除</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <el-form v-if="showadd" :model="form" label-width="80px" style="margin-top:30px;">
                    <el-form-item label="附件名称" >
                        <el-select placeholder="请选择" v-model="form.name">
                            <el-option label="可研究性报告" value="shanghai"></el-option>
                            <el-option label="踏勘选址报告" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="问题描述">
                        <el-input type="textarea" v-model="form.question" rows="4">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="showadd=false">取消</el-button>
                    </el-form-item>  
                    
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form:{
                name:'',
                question:'',
            },
            showadd:false,
            radio:"1"
        };
    },
    
    created() {
        
    },
    methods: {
        onSubmit(){
            this.showadd = false;
        },
        addadvice(){
            this.showadd = true;
        }
    }
};
</script>

<style lang="scss" scoped>
    .maincontent{
        padding: 20px 30px 40px;
        background: #ffffff;
        .contentbox{
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            // -webkit-align-items: center;
            // align-items: center;
            .printImg{
                width:33%;
                img{
                    width: 100%;
                    display: block;
                }
            }
            .addadvice{
                margin-left: 7%;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                .header{
                    margin-top: 24px;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    padding: 30px 30px 20px;
                    border-bottom: 1px solid #e4e4e4;;
                    .title{
                        -webkit-box-flex: 1;
                        -webkit-flex: 1;
                        flex: 1;
                        font-size:18px;
                        font-family:PingFang SC;
                        font-weight:bold;
                        line-height:25px;
                        color: #4d4d4d;
                    }
                    .export{
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        line-height:20px;
                        color: #737373;
                        img{
                            width: 12px;
                            margin-right: 3px;
                        }
                    }
                }
                .menulist{
                    margin-top: 20px;
                    .item{
                        width:116px;
                        height:36px;
                        background: #ffffff;
                        line-height: 36px;
                        text-align: center;
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        color: #999999;
                        margin-right: 24px;
                        float: left;
                        cursor: pointer;
                        &.active{
                            background: #EEF3F8;
                            color: #1D88F3;
                        }
                    }
                    .add{
                        float: right;
                        width:60px;
                        height:28px;
                        background:rgba(64,158,255,1);
                        border-radius:2px;
                        text-align: center;
                        line-height: 28px;
                        font-size:14px;
                        font-family:PingFang SC;
                        font-weight:500;
                        color: #ffffff;
                        margin-top: 4px;
                        cursor: pointer;
                        margin-right: 30px;
                    }
                }
                .advicelist{
                    margin-top: 10px;
                    .item{
                        padding: 20px 30px;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-align: center;
                        border-bottom: 1px solid #e4e4e4;
                        .situation{
                            -webkit-box-flex: 1;
                            -webkit-flex: 1;
                            flex: 1;
                            .msg{
                                margin-top: 10px;
                                font-size:14px;
                                font-family:PingFang SC;
                                font-weight:500;
                                line-height:20px;
                                color: #8c8c8c;
                            }
                        }
                        .other{
                            text-align: right;
                            .date{
                                height:18px;
                                font-size:13px;
                                font-family:PingFang SC;
                                font-weight:500;
                                line-height:18px;
                                color: #999999;
                            }
                            .delete{
                                font-size:14px;
                                font-family:PingFang SC;
                                font-weight:500;
                                line-height:20px;
                                margin-top: 12px;
                                color: #F92828;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
 